<script setup>
import { ref } from 'vue'
import {
  getEmpInfo,
  getCurWorkWeekRecord,
  getCurWorkMonthRecord
} from '@/api/rsgl'
// 对话框状态
const state = ref(false)

// 表单数据
const formData = ref({
  id: '',
  empName: '',
  workCode: '',
  entryTime: '',
  phone: '',
  deptName: '',
  gender: ''
})
const detailsTableData = ref([])
async function getEmpDetails() {
  await getEmpInfo(formData.value.id).then((res) => {
    detailsTableData.value = [res.data]
  })
}
//周打卡信息
const CurWorkWeekTableData = ref([])
async function getEmpWeekRecords() {
  await getCurWorkWeekRecord(formData.value.id).then((res) => {
    CurWorkWeekTableData.value = res.data
  })
}
//月打卡信息
const CurWorkMonthTableData = ref([])
async function getEmpMonthRecords() {
  await getCurWorkMonthRecord(formData.value.id).then((res) => {
    CurWorkMonthTableData.value = res.data
  })
}
// onMounted(() => {
//   getEmpDetails()
// })
// 暴露
defineExpose({
  state,
  formData
})
// const details = (row) => {
//   detailsRef.value.state = true
//   // if (row) {
//   //   infoRef.value.formData = row
//   // }
//   getEmpInfo(row.id).then((res) => {
//     console.log('res.data', res.data)
//     detailsRef.value.tableData = res.data
//   })
// }

const handleClick = (tab) => {
  // tab 是一个对象，包含了当前标签页的信息，如 name, label 等
  // event 是原生点击事件对象
  if (tab.props.label === '基础信息') {
    getEmpDetails()
  }
  if (tab.props.label === '考勤信息') {
    getEmpWeekRecords()
    getEmpMonthRecords()
  }
  //   console.log('当前点击的标签页 name:', tab.props.label)
  //   console.log('当前点击的标签页 label:', tab.label)
}
</script>
<template>
  <el-dialog
    v-model="state"
    :title="员工详情"
    width="950"
    :before-close="
      () => {
        state = false
        detailsTableData = []
        CurWorkWeekTableData = []
        CurWorkMonthTableData = []
      }
    "
  >
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="基础信息" sname="first">
        <el-table :data="detailsTableData" :border="true">
          <el-table-column
            label="姓名"
            prop="empName"
            align="center"
          ></el-table-column>
          <el-table-column
            label="性别"
            prop="gender"
            align="center"
          ></el-table-column>
          <el-table-column
            label="手机号"
            prop="phone"
            align="center"
          ></el-table-column>
          <el-table-column
            label="员工编号"
            prop="workCode"
            align="center"
            width="100"
          ></el-table-column>
          <el-table-column
            label="部门"
            prop="deptName"
            align="center"
          ></el-table-column>
          <el-table-column
            label="领导"
            prop="leader"
            align="center"
          ></el-table-column>
          <el-table-column
            label="入职时间"
            prop="entryTime"
            align="center"
          ></el-table-column>
          <el-table-column
            label="工龄"
            prop="workAge"
            align="center"
          ></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="考勤信息" name="second">
        <h1>本月打卡信息</h1>
        <el-table :data="CurWorkMonthTableData" :border="true">
          <el-table-column
            label="序号"
            type="index"
            align="center"
            width="70"
          ></el-table-column>
          <el-table-column
            label="打卡周"
            prop="workWeek"
            align="center"
          ></el-table-column>
          <el-table-column
            label="应出勤天数"
            prop="attendDays"
            align="center"
          ></el-table-column>
          <el-table-column
            label="实际出勤天数"
            prop="acAttendDays"
            align="center"
          ></el-table-column>
          <el-table-column
            label="考勤异常次数"
            prop="numOfAbnormal"
            align="center"
          ></el-table-column>
          <el-table-column
            label="异常次数占比"
            prop="percentOfAbnormal"
            align="center"
          ></el-table-column>
        </el-table>
        <h1>本周打卡信息</h1>
        <el-table :data="CurWorkWeekTableData" :border="true">
          <el-table-column
            label="序号"
            type="index"
            align="center"
            width="70"
          ></el-table-column>
          <el-table-column
            label="考勤日期"
            prop="workDate"
            align="center"
            width="150"
          ></el-table-column>
          <el-table-column
            label="上班打卡"
            prop="workUpRecord"
            align="center"
          ></el-table-column>
          <el-table-column
            label="下班打卡"
            prop="workDownRecord"
            align="center"
          ></el-table-column>
          <el-table-column
            label="打卡结果"
            prop="recordResult"
            align="center"
            width="100"
          ></el-table-column>
          <el-table-column
            label="备注说明"
            prop="remark"
            align="center"
            width="150"
          ></el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>
